<template>
  <el-dialog
    class="met-dialog"
    :title="dialog.title"
    width="900px"
    :visible.sync="dialog.visible"
    :append-to-body="true"
  >
    <!-- 添加 会议室-->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="dev-form smallinput"
    >
      <el-form-item label="会议室名称" prop="name">
        <el-input v-if="type != 3" v-model="ruleForm.name"></el-input>
        <span v-else>{{ ruleForm.name }}</span>
      </el-form-item>
      <el-form-item label="会议室地点" prop="address">
        <el-input v-if="type != 3" v-model="ruleForm.address"></el-input>
        <span v-else>{{ ruleForm.address }}</span>
      </el-form-item>
      <el-form-item label="管理员" prop="managerId" class="w2 float-r">
        <el-select
          v-if="type != 3"
          v-model="ruleForm.managerId"
          placeholder="请选择管理员"
        >
          <el-option
            :label="item.userName"
            :key="item.userId"
            v-for="item in userList"
            :value="item.userId"
          ></el-option>
        </el-select>
        <span v-else>{{ ruleForm.managerId }}</span>
      </el-form-item>
      <el-form-item label="容纳人数" prop="capacity" class="w2 float-r">
        <el-input-number
          v-if="type != 3"
          v-model="ruleForm.capacity"
          :min="1"
          :max="10000"
          label="请输入"
        ></el-input-number>
        <span v-else>{{ ruleForm.capacity }}</span>
      </el-form-item>

      <el-form-item label="设备状态" prop="deviceStatus" class="w2 float-r">
        <el-select
          v-if="type != 3"
          v-model="ruleForm.deviceStatus"
          placeholder="请选择设备状态"
        >
          <el-option
            v-for="dict in dict.type.equipment_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <span v-else
          ><dict-tag
            :options="dict.type.equipment_status"
            :value="ruleForm.deviceStatus"
        /></span>
      </el-form-item>
      <el-form-item label="状态" prop="status" class="w2 float-r">
        <el-radio-group v-if="type != 3" v-model="ruleForm.status">
          <el-radio :label="0">启用</el-radio>
          <el-radio :label="1">禁用</el-radio>
        </el-radio-group>
        <span v-else>{{ ruleForm.status == 0 ? "启用" : "禁用" }}</span>
      </el-form-item>
    </el-form>
    <div class="foot">
      <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
      <el-button @click="resetForm('ruleForm')">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { roomadd, rommdetail, roomupdata, getAllUser } from "@/api/met";
export default {
  components: {},
  data() {
    return {
      dialog: {
        visible: false,
        title: "新增会议室",
      },
      userList: [], //用户列表
      type: 1, //1添加，2编辑，3查看
      ruleForm: {
        name: "",
        address: "",
        managerId: "",
        status: "",
        deviceStatus: "",
        type: [],
        resource: "",
        capacity: "",
      },
      isedit: false, //是否是编辑状态
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入会议室地点", trigger: "change" },
        ],
        managerId: [
          { required: true, message: "请选择管理员", trigger: "change" },
        ],
        capacity: [
          { required: true, message: "请输入容纳人数", trigger: "blur" },
        ],
        deviceStatus: [
          { required: true, message: "请选择活设备状态", trigger: "change" },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  dicts: ["equipment_status"],
  computed: {},

  methods: {
    //打开弹窗
    async open(row) {
      console.log(row);
      if (row) {
        let res = await rommdetail(row.id);
        console.log(row);
        this.dialog.title = row.type == 2 ? "编辑会议室" : "查看会议室";
        this.type = row.type;
        this.ruleForm = res.data || this.ruleForm;
        this.ruleForm.deviceStatus = String(this.ruleForm.deviceStatus || 1);
      } else {
        this.type = 1;
        this.$data.ruleForm = this.$options.data().ruleForm;
        // Object.assign(this.$data.formline, this.$options.data().formline);
        this.dialog.title = "新增会议室";
      }
      this.getAllUser();
      this.dialog.visible = true;
    },
    getAllUser() {
      getAllUser().then((res) => {
        this.userList = res.data;
      });
    },
    submitForm(formName) {
      if (this.type == 3) {
        this.resetForm(formName);
        return;
      }
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log("提交成功", this.ruleForm);
          if (this.type == 1) {
            await roomadd(this.ruleForm).then((response) => {
              console.log(response);
            });
          } else {
            await roomupdata(this.ruleForm).then((response) => {
              console.log(response);
            });
          }

          this.$emit("submit");
          this.resetForm(formName);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialog.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.foot {
  text-align: center;
  margin-top: 30px;
}
</style>
